<template>
  <a-modal title="抽赏结果" style="top: 100px;" :visible="isShow" width="800px" @ok="handleOk" @cancel="handleCancel"
    :footer="false">
    <div id="printTest">
    <div class="address" v-if="order">
      <span>购买商品:{{ order.title }}</span>&nbsp;&nbsp;
      <span>订单号:{{ order.number }}</span></br>
      <span>用户名:{{ order.user.name }}</span>&nbsp;&nbsp;
      <span>手机号:{{ order.user.phone }}</span></br>
    </div>
   <a-table class="table" :pagination="false" :dataSource="list">
      <a-table-column title="封面" width="80px">
          <template slot-scope="row">
            <img class="thumb" :src="row.thumb">
          </template>
        </a-table-column>
      <a-table-column title="商品" >
        <template slot-scope="row">
          <div>{{row.title}}</div>
        </template>
      </a-table-column>
      <a-table-column title="售价" width="100px" v-if="moneyShow">
        <template slot-scope="row">
          <PriceDisplay :info="row"></PriceDisplay>
        </template>
      </a-table-column>
      <a-table-column title="数量" >
        <template slot-scope="row">
          <div>{{row.total}}</div>
        </template>
      </a-table-column>

      <<a-table-column title="状态" >
        <template slot-scope="row">
          <div>{{row.union_status_text}}</div>
        </template>
      </a-table-column>

      
    </a-table>

    </div>
    <div class="btn-c">

      <a-button style="margin-right: 10px; float: right;"  type="primary" v-show="moneyShow" @click="toggleColumn()">
        <span>隐藏售价</span>
      </a-button>

    </div>

  </a-modal>
</template>
<script>
  import Buyslog from "@/views/storage/components/Buyslog.vue"
  export default {
    components: {
      Buyslog,
    },
    props: {
      order: {
        type: Object
      },
      isShow: {
        type: Boolean
      }
    },
    computed: {
    },
    data() {
      return {
        list: {},
        moneyShow:true,
      }
    },
    mounted() {
      this.list = this.order.packages;
    },
    methods: {
      toggleColumn() {
        this.moneyShow = false
      },
      
      handleOk() {},
      handleCancel() {
        this.$emit('hide')
      },
    },

  }
</script>
<style lang="scss" scoped>
  .table {

    .thumb {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .right {
      margin-left: 10px;
    }

    .title {
      // min-height: 30px;
      min-width: 100px;
      font-weight: 500;
    }

  }
  .btn-c {
    overflow: hidden;
    margin: 20px 0px 10px 0px;
  }
</style>